<template>
  <div class="padding-left-right-20 padding-top-20">
    <div class="flex">
      <div class="flex-1" v-for="(item) in contractStageList" :key="item.contractStage">
        <div class="t-center padding-bottom-20 font-size-16">{{ item.contractStageName }}({{ item.contractStageNum }})</div>
        <div class="top-line relative-box">
          <div class="absolute-box padding-5 step-box bg-white">
            <div class="step-txt t-center color-white">{{ item.contractStage }}</div>
          </div>
        </div>
        <div class="flex-column align-center">
          <div class="cursor-pointer fold-box padding-left-right-45 padding-top-bottom-20 flex-column align-center" @click="goInfo(fold)" v-for="(fold,foldIndex) in item.contractTypeList" :key="'contract'+fold.contractStage + foldIndex">
            <i class="el-icon-folder-opened"></i>
            <div class="">{{ fold.contractParentTypeName }}（{{ fold.contractTypeNum }}）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiContractCount } from '../../../api/contract';

  export default {
    name: 'history',
    data() {
      return {
        contractStageList:[],
      };
    },

    mounted() {
      this.getContractCount()
    },

    methods: {
      //数量 | 类型
      async getContractCount() {
        let res = await apiContractCount({
          countContractType: false, //(是否查询合同类型统计)
          countContractStage: true, //(是否查询合同阶段统计)
          ifOverdue: true, //(是否查询的是历史合同)
          contractStatusList: [2,4,5],
        });

        this.contractStageList = res.contractStageList || [];
      },

      //详情
      goInfo(row) {
        let param = {
          contractType: row.contractParentType,
          headerName: '历史合同明细',
        };
        let pathUrl = {
          name: 'history-info',
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToHistoryList'
        window.open(href, windowName);
      },
    },
    components: {},
  };
</script>

<style lang="scss" scoped>
  .top-line {
    width: 100%;
    height: 2px;
    background: #333;
    .step-box {
      left: 50%;
      top: 50%;
      margin-left: -15px;
      margin-top: -15px;
      .step-txt {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: rgb(239, 168, 36);
      }
    }
  }
  .el-icon-folder-opened {
    font-size: 40px;
  }
  .fold-box:hover {
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
  }
</style>
